5.3:H205102 When design web content layout, avoid using tables for linearized design.

Improper design

Below is an improper example where table was used as a tool for word arrangement in the website.

Improper design:

<TABLE width="800" height="75" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="200" bgcolor="#eeeeee">information 1</TD>
<TD width="400" bgcolor="#9999FF">the main web content 2</TD>
<TD width="200" bgcolor="#999999">information 3</TD>
</TR>
<TR>
<TD bgcolor="#eeeeee">【content】</TD>
<TD bgcolor="#9999FF">【content】</TD>
<TD bgcolor="#999999">【content】</TD>
</TR>
<TR>
<TD bgcolor="#eeeeee"></TD>
<TD bgcolor="#9999FF"></TD>
<TD bgcolor="#999999"></TD>
</TR>
</TABLE>

End of example

Proper demonstration

When designing website, one should avoid using table for layout arrangement, the example below used proper style sheets to do document layout.

Proper example：

<HEAD>
<STYLE type="text/css">
<!--
#col1{
    top:100px;
    left:10px;
    width:200px;
    background:#eeeeee;
    border:0px solid #000;
    margin-left:0px;
    position:absolute;
    overflow: hidden;
    height: 90px;
    background-color: #eeeeee;
    }
#col2{
    top:100px;
    left:210px;
    width:400px;
    background:#eeeeee;
    border:0px solid #000;
    margin-left:0px;
    position:absolute;
    overflow: hidden;
    height: 90px;
    background-color: #9999FF;
    }
#col3{
    top:100px;
    left:610px;
    width:200px;
    background:#D5CFB0;
    border:0px solid #000;
    position:absolute;
    margin-left:0px;
    overflow: hidden;
    height: 90px;
    background-color: #999999;
    }
-->
</STYLE>
</HEAD>

  <DIV id="col1">
  <P align="center">information 1</P>
  <P align="center">【content】</P>
  </DIV>
  <DIV id="col2">
  <P align="center">the main web content 2</P>
  <P align="center">【content】</P>
  </DIV>
  <DIV id="col3">
  <P align="center">information 3</P>
  <P align="center">【content】</P>
  </DIV>

End of example